<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h1 id="myHeading">This is a heading"</h1>
<p class="myParagraph">This is the First paragraph.</p>
<p class="myParagraph">This is the second paragraph.</p>
<p class="myParagraph">This is the Third paragraph.</p>
<div>This is a div element 1.</div>
<div>This is a div element 2.</div>
<div>This is a div element 3.</div>
</div>
</div>
<Script>
// Access by ID
let heading = document.getElementById("myHeading");
console.log(heading.innerText);
// Access by Class
let paragraphs = document.getElementsByClassName("myParagraph");
console.log(paragraphs[0].innerText);
// Access by Tag
let allDivs = document.getElementsByTagName("div");
console.log(allDivs.length);
// Access by Query Selector
let firstParagraph = document.querySelector(".myParagraph");
console.log(firstParagraph.innerText);
</Script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h3 id="myHeading">Original Heading</p>
<button onclick="updateHeading()">Update Heading</button>
<div class="output-box"></div>
</div>
<Script>
function updateHeading() {
let myHeading = document.getElementById("myHeading");
myHeading.innerText = "Updated Heading!"; // Changes the heading text
}
</Script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p id="removeMe">This paragraph will be removed.</p>
<div>
<button onclick="createElement()">Create a New Paragraph</button>
<button onclick="removeElement()">Remove Paragraph with ID 'removeMe'</button>
</div>
<Script>
// Creating a new element
function createElement(){
let newElement = document.createElement("p");
newElement.innerText = "This is a new paragraph.";
document.body.appendChild(newElement);
}
// Removing an element
function removeElement() {
document.getElementById("removeMe").remove();
}
</Script>
</body>
</html>
This paragraph will be removed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="output-box">
<h3 id="styledHeading">Styled Heading</h3>
<button onclick="changeStyle()">Change Style</button>
</div>
<Script>
function changeStyle() {
let heading = document.getElementById("styledHeading");
heading.style.color = "blue";
heading.style.fontSize = "2em";
}
</Script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button button id="clickButton">Click Me!</button>
<Script>
let button = document.getElementById("clickButton");
button.addEventListener("click", function() {
alert("Button Clicked!");
});
</Script>
</body>
</html>